<template>
<!--  <img alt="Vue logo" src="./assets/logo.png" />-->
  <HelloWorld :msg="counter2" ref="hello_com" />
  <p>counter:{{twiceTheCounter}}</p>
  <modal-button ref="modal_com"></modal-button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import ModalButton from './components/ModalButton.vue'
import { ref, onMounted,computed } from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    ModalButton
  },
  setup (props) {
    const counter = ref(0)
    const twiceTheCounter = computed(() => counter.value * 2)

    counter.value++
    console.log(counter.value) // 1
    console.log(twiceTheCounter.value) // 2




    const repositories = ref([])
    const getUserRepositories = () => {
      console.log('getUserRepositories---------')
      repositories.value.push(222)
    }

    const testFun = () =>{
      console.log('onMounted------')
      console.log(repositories)
      // getUserRepositories();
      console.log(repositories)
    }

    onMounted(testFun) // 在 `mounted` 时调用 `getUserRepositories`

    return {
      counter,
      twiceTheCounter,
      repositories,
      getUserRepositories
    }
  },
  data(){
    return {
      counter2:2222
    }
  },
  methods:{
    getUserRepositories(){
      console.log('methods getUserRepositories')
    }
  },
  mounted (){
    console.log('mounted2-------')
    console.log(this.counter2)
    // console.log(this.repositories)
    this.getUserRepositories();
    // console.log(this.repositories)
    setTimeout(() =>{
      this.counter++;
      this.counter2 = 333;
      // console.log('hello_com----',this.$refs.hello_com.test_val)
      // console.log('hello_com----2',this.$refs.hello_com.count)
      console.log('modal_com',this.$refs['modal_com'].modalOpen)
    },3000)


  },
  computed:{
    cpu_counter(){
      return this.counter*2
    }
  }
}
</script>
